<!-- 自定义导航的盒子 -->
<template>
  <view class="music-box">
    <!-- 自定义背景 -->
    <slot name="bg">
    </slot>

    <!-- 导航区域 -->
    <view class="head-box">
      <view v-if="showLeft"
            :class="['left-box', theme]">
        <view class="iconfont iconzuojiantou-copy"
              @click="backClick"></view>
        <view class="divider"></view>
        <view class="iconfont iconshouye"
              @click="homeClick"></view>
      </view>
      <out-hidden-view class="title"
                       :style="titleStyle">
        {{title}}
      </out-hidden-view>
      <view class="right-box"></view>
    </view>

    <!-- 主体区域 -->
    <scroll-view class="scroll-box"
                 scroll-y="true">
      <slot name="default">
      </slot>
    </scroll-view>
  </view>
</template>

<script>
  export default {
    name: "music-box",
    props: {
      // 是否显示顶部导航
      showHead: {
        type: Boolean,
        default: true
      },

      // 头部标题
      title: {
        type: String,
        default: ''
      },

      titleStyle: {
        type: String,
        default: ''
      },

      // 显示左侧按键
      showLeft: {
        type: Boolean,
        default: true
      },

      // 主题选择 dark、light
      theme: {
        type: String,
        default: 'dark',
        validator(v) {
          return ['dark', 'light'].includes(v)
        }
      }
    },
    data() {
      return {

      };
    },
    methods: {
      // 回退按钮点击
      backClick() {
        uni.navigateBack()
      },

      // 返回首页按钮点击
      homeClick() {
        uni.redirectTo({
          url: '/pages/index/index'
        })
      }
    }
  }
</script>

<style scoped
       lang="scss">
  .music-box {
    height: 100vh;

    .head-box {
      height: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      font-size: 16px;
      text-align: center;
      color: #000;

      .title {
        width: 320rpx;
      }

      .left-box {
        width: 90px;
        height: 30px;
        border-radius: 15px;
        padding: 0 15px;
        box-sizing: border-box;
        position: absolute;
        left: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        &.dark {
          color: #FFFFFF;
          background-color: rgba(0, 0, 0, .4);

          .divider {
            border-left: 1px solid white;
            height: 15px;
          }
        }

        &.light {
          color: #000000;
          background-color: #FFFFFF;
          border: 1px solid #d7d7d7;

          .divider {
            border-left: 1px solid #000000;
            height: 15px;
          }
        }
      }
    }

    .scroll-box {
      height: calc(100vh - 80px);
    }

    /* 防止子元素设置margin导致margin穿透现象 */
    /deep/ .uni-scroll-view-content {
      overflow: auto;
    }
  }
</style>
